<template>
    <div id="register">
      <h3>注册</h3>
      <div>
        <el-form :inline="true" :model="registerBean">
          <el-form-item label="账号">
            <el-input prefix-icon="el-icon-postcard" v-model="registerBean.userAccount" placeholder="请输入账号" clearable
                      autofocus></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" prefix-icon="el-icon-postcard" v-model="registerBean.userPassword"
                      placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="再次输入密码">
            <el-input type="password" prefix-icon="el-icon-postcard" v-model="registerBean.userPasswordAgain"
                      placeholder="请再次输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input prefix-icon="el-icon-postcard" v-model="registerBean.userName" placeholder="请输入姓名"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input prefix-icon="el-icon-mobile-phone" v-model="registerBean.userPhone" placeholder="请输入电话号码"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="电子邮件">
            <el-autocomplete prefix-icon="el-icon-message" v-model="registerBean.userEmail" placeholder="请输入电子邮件"
                             :trigger-on-focus="false" :fetch-suggestions="matchingUserEmail"></el-autocomplete>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker v-model="registerBean.userBirthday" type="date" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" placeholder="选择日期" clearable></el-date-picker>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="registerBean.userSex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button plain @click="verifyUserAccount">注&nbsp;&nbsp;册</el-button>
            <span @click="toLogin" id="toLogin">&nbsp;&nbsp;已有账号？点击登录</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'register',
    data() {
      return {
        registerBean: {
          userId: '',
          userAccount: '',
          userPassword: '',
          userPasswordAgain: '',
          userName: '',
          userPhone: '',
          userEmail: '',
          userBirthday: '',
          userSex: 1,
          userPhoto: 'logo.jpg'
        }
      }
    },
    created() {
      this.getUserId()
    },
    methods: {
      verifyUserAccount() {
        if (this.registerBean.userAccount.length === 0) {
          var message = '请输入您的账号'
          this.registerMessage(message)
          return
        }
        this.axios.get('/qs/user/judge?userAccount=' + this.registerBean.userAccount).then(
          response => {
            if (response.data && response.data.code === 500) {
              var message = response.data.message
              this.registerMessage(message)
              return
            } else {
              this.register()
            }
          }, error => {
            console.error(error)
          })
      },
      verifyUserPassword() {
        if (this.registerBean.userPassword.length === 0) {
          var message = '请输入您的密码'
          this.registerMessage(message)
          return false
        }
        return true
      },
      verifyUserPasswordAgain() {
        if (this.registerBean.userPasswordAgain.length === 0) {
          var message = '请再次输入您的密码'
          this.registerMessage(message)
          return false
        }
        if (this.registerBean.userPasswordAgain !== this.registerBean.userPassword) {
          var message = '两次输入密码不一致'
          this.registerMessage(message)
          return false
        }
        return true
      },
      verifyUserName() {
        if (this.registerBean.userName.length === 0) {
          var message = '请输入您的姓名'
          this.registerMessage(message)
          return false
        }
        return true
      },
      verifyUserPhone() {
        if (this.registerBean.userPhone.length === 0) {
          var message = '请输入您的电话号码'
          this.registerMessage(message)
          return false
        }
        var reg = /^1[3|4|5|7|8][0-9]{9}$/
        if (!reg.test(this.registerBean.userPhone)) {
          var message = '电话号码格式不正确'
          this.registerMessage(message)
          return false
        }
        return true
      },
      verifyUserEmail() {
        if (this.registerBean.userEmail.length === 0) {
          var message = '请输入您的电子邮件'
          this.registerMessage(message)
          return false
        }
        var reg = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/
        if (!reg.test(this.registerBean.userEmail)) {
          var message = '电子邮件格式不正确'
          this.registerMessage(message)
          return false
        }
        return true
      },
      verifyUserBirthday() {
        if (this.registerBean.userBirthday.length === 0) {
          var message = '请输入您的出生日期'
          this.registerMessage(message)
          return false
        }
        return true
      },
      register() {
        var verifyUserPassword = this.verifyUserPassword()
        if (!verifyUserPassword) {
          return
        }
        var verifyUserPasswordAgain = this.verifyUserPasswordAgain()
        if (!verifyUserPasswordAgain) {
          return
        }
        var verifyUserName = this.verifyUserName()
        if (!verifyUserName) {
          return
        }
        var verifyUserPhone = this.verifyUserPhone()
        if (!verifyUserPhone) {
          return
        }
        var verifyUserEmail = this.verifyUserEmail()
        if (!verifyUserEmail) {
          return
        }
        var verifyUserBirthday = this.verifyUserBirthday()
        if (!verifyUserBirthday) {
          return
        }
        this.registerBean.userSex = this.registerBean.userSex == 1 ? '男' : '女'
        this.axios.post('/qs/user/register', this.registerBean).then(
          response => {
            this.$router.push('/')
          }, error => {
            console.error(error)
          })
      },
      getUserId() {
        this.axios.get('/qs/id').then(
          response => {
            if (response.data && response.data.code === 200) {
              this.registerBean.userId = response.data.message
            } else {
              console.error(response.data.message)
            }
          }, error => {
            console.error(error)
          })
      },
      toLogin() {
        this.$router.push({
          path: '/login'
        })
      },
      matchingUserEmail(userEmail, callback) {
        var suffixs = this.userEmailSuffix()
        suffixs.forEach((suffix) => {
          suffix.value = userEmail + suffix.value
        })
        callback(suffixs)
      },
      userEmailSuffix() {
        return [
          {'value': '@qq.com'}
        ]
      },
      registerMessage(message) {
        this.$message({
          type: 'warning',
          message: message,
          showClose: true
        });
      }
    }
  }
</script>

<style>
    #register {
      height: 100%;
      width: 20%;
    }

    #toLogin {
      cursor: pointer;
      color: green;
      font-size: smaller;
    }
</style>
